<template>
  <div id="app">
    <router-view class="router"/>
    <div class="bottom-contant" v-if="isShow">
      <div class="bottom-box"></div>
      <div class="button-contant">
        <div class="button-item" @click.stop="jumpClick(1,'/')">
          <img :src=" navIndex == 1 ? navArr[1]:navArr[0]" class="icon">
          <div class="text-icon">附近</div>
        </div>
        <div class="button-item" @click.stop="jumpClick(2,'/Message')">
          <img :src=" navIndex == 2 ? navArr[3]:navArr[2]" class="icon">
          <div class="text-icon">消息</div>
        </div>
        <div class="button-scale" @click="scaleOpen()">
          <div class="cricle">
            <img :src="scale" class="cricle-img">
            <div class="cover">
              <img :src="icon" class="icon">
            </div>
          </div>
        </div>
        <div class="button-item" @click.stop="jumpClick(3,'/Order')">
          <img :src=" navIndex == 3 ? navArr[5]:navArr[4]" class="icon">
          <div class="text-icon">订单</div>
        </div>
        <div class="button-item" @click.stop="jumpClick(4,'/Center')">
          <img :src=" navIndex == 4 ? navArr[7]:navArr[6]" class="icon">
          <div class="text-icon">我的</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"; //先要引入
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      scale: require("./assets/Home/circle.png"),
      icon: require("./assets/scale.png"),
      raduis: require("./assets/Home/raduis.png"),
      navArr: [
        require("./assets/nav/1.png"),
        require("./assets/nav/2.png"),
        require("./assets/nav/3.png"),
        require("./assets/nav/4.png"),
        require("./assets/nav/5.png"),
        require("./assets/nav/6.png"),
        require("./assets/nav/7.png"),
        require("./assets/nav/8.png")
      ]
    };
  },
  methods: {
    ...mapActions("Home", ["change", "navChange"]),
    jumpClick(index, path) {
      this.navChange(index);
      this.$router.replace({
        path: path
      });
    },
    scaleOpen() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        }
      });
    }
  },
  computed: {
    ...mapState({
      isShow: state => state.Home.navshow,
      navIndex: state => state.Home.navIndex
    })
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#app {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
  .router {
    flex: 1;
  }
  .bottom-contant {
    position: relative;
    width: 100%;
    height: 1.4rem;
    background-color: #fff;
  }
  .bottom-box {
    position: absolute;
    left: 0;
    top: -0.8rem;
    width: 100%;
    height: 2rem;
    background: url("./assets/Home/raduis.png") no-repeat;
    background-size: cover;
    background-size: 100%;
    box-sizing: border-box;
  }
  .button-contant {
    position: absolute;
    left: 0;
    top: 0rem;
    display: flex;
    justify-content: center;
    margin-top: 0.15rem;
    padding: 0 0.6rem;
    width: 100%;
    height: 1.6rem;
    box-sizing: border-box;
    background-color: #fff;
    .button-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex: 1;
      .icon {
        width: 0.65rem;
        height: 0.65rem;
      }
      .text-icon {
        margin-top: 0.12rem;
        font-size: 0.32rem;
        letter-spacing: 0.03rem;
        color: rgba(153, 154, 157, 1);
      }
    }
    .button-scale {
      display: flex;
      justify-content: center;
      margin-top: -0.8rem;
      width: 2rem;
      .cricle {
        position: relative;
        width: 1.9rem;
        height: 1.9rem;
        padding: 0.1rem;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: #fff;
        .cricle-img {
          width: 100%;
          height: 100%;
          animation: turn 3s linear infinite;
        }
        .cover {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          animation: bring 3s linear infinite;
          .icon {
            width: 0.8rem;
            height: 0.8rem;
          }
        }
      }
    }
  }
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: rotate(-180deg);
    opacity: 0.4;
  }
  100% {
    transform: rotate(-360deg);
    opacity: 1;
  }
}

@keyframes bring {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}
</style>
